<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Login</title>
	<link rel="stylesheet" href="/public/css/login.css" />
	<script src="/public/js/jquery-1.7.0.js" type="text/javascript"></script>
	<script src="/public/js/function.js" type="text/javascript"></script>
</head>
<body>
	<div id="logo"></div>
	<div id="login">
		<h2><img id="login_lock" border="0" src="/public/img/login_lock.png" alt="login_lock"/> LOGIN</h2>
		<form action="/user/login" id="UserLoginForm" method="post" accept-charset="utf-8">
			<fieldset>
				<label class="err"></label>	
				<p><label for="username">Username</label></p>
				<p><input name="username" placeholder="Username" type="text" id="username"/></p>
				<p><label for="password">Password</label></p>
				<p><input name="password" placeholder="Password" type="password" id="password"/></p>
				<input  type="submit" value="Sign In"/>			
			</fieldset>
		</form>	
	</div> 
	<div id="main">
		<a href="#" target="_blank">
			Karaoke &copy; 2014</a>
	</div>
</body>

<script type="text/javascript">
	$(document).ready(function(){
		$('#username').focus();
		setTop();		
		$(window).resize(function(){
			setTop();
		});
	});

	function setTop(){
		var resol= getResolBrowser();
		var fTitle= $('#logo').css('height');		
		fTitle = parseInt(fTitle.substr(0,fTitle.length - 2));
				
		var fHeight = $('#login').css('height');		
		fHeight = parseInt(fHeight.substr(0,fHeight.length - 2));
		var setTopForm = (resol[1] - fHeight)/2 - fTitle;
		$('body').css({'margin-top' : setTopForm});
	}
</script>
</html>